<template>
  <div class="charts" ref="charts">

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "barCharts",
  mounted() {
    let lineCharts = echarts.init(this.$refs.charts)
    lineCharts.setOption({
      xAxis: {
        // 隐藏x轴 
        show: false,
        min: 0,
        max: 100
      },
      yAxis: {
        show: false,
        type: 'category'//在y轴均分，使其横向排列
      },
      series: [{
        type: 'bar',
        data: [78],
        color: 'yellowgreen',
        barWidth: 10,
        //背景颜色设置
        showBackground: true,
        backgroundStyle: {
          color: '#eee'
        },
        //图上的文本标签，图右边的那个竖线
        label: {
          show: true,
          formatter: '|',
          position: 'right',//标签文本内容

        }
      }],
      //布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      },

    })
  }
}
</script>


<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>